<template>
    <div>
        <!-- <input type="text" v-model.lazy="msg"> -->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
        <div>
            <input id="jack" type="checkbox" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>

            <input id="John" type="checkbox" value="John" v-model="checkedNames">
            <label for="John">John</label>

            <input id="Mike" type="checkbox" value="Mike" v-model="checkedNames">
            <label for="Mike">Jack</label>
            <div>{{ checkedNames }}</div>
        </div>
        <button v-on:click="getInputData">getData</button>
    </div>
</template>
<script>
export default {
    name:"FormComponent",
    data(){
        return{
            msg:"",
            checkedNames:[]
        }
    },
    methods:{
        getInputData(){
            console.log(this.msg);
        }
    },
    // 监听数据的变化
    watch:{
        msg(value){
            if(value == "iwen"){
                console.log("正确的");
            }else{
                console.log(value);
            }
        }
    }
}
</script>
<style scoped>

</style>
